<template>
  <div class="my-component">
    <div class="title">
      {{ label }}
    </div>
    <div class="my-form">
      <input v-model="num1">
      <input v-model="num2">
      <input v-model="num3">
    </div>
  </div>
</template>

<script>

export default {
  name: 'CustomComponent',
  props: {
    value: {
      type: [ String, Number ],
      default: '0.0.0',
    },
    label: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      num1: this.value.split('.')[0],
      num2: this.value.split('.')[1],
      num3: this.value.split('.')[2],
      currentVal: this.value,
    }
  },
  watch: {
    value (val) {
      this.currentVal = val + ''
    },
    currentVal (val) {
      this.num1 = val.split('.')[0]
      this.num2 = val.split('.')[1]
      this.num3 = val.split('.')[2]
      this.$emit('input', val)
    },

    num1 (val) {
      let array = this.currentVal.split('.')
      array[0] = val
      this.currentVal = array.join('.')
    },
    num2 (val) {
      let array = this.currentVal.split('.')
      array[1] = val
      this.currentVal = array.join('.')
    },
    num3 (val) {
      let array = this.currentVal.split('.')
      array[2] = val
      this.currentVal = array.join('.')
    },
  },
}
</script>

<style lang="stylus">
  .my-component {
    .title {
      padding 0 10px
      font-size 14px
    }
    .my-form {
      display flex
      margin 10px;
      input {
        display inline-block
        width 30%
        border 1px solid #eee
        margin 0 5px
        text-align right
        padding 5px
      }
    }
  }
</style>
